<template>
  <div class="right">
    <el-card class="box-card article">
      <div slot="header"
           class="clearfix">
        <span>文章榜</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text" @click="change()">换一换</el-button>
      </div>
      <div v-for="(item,index) in list"
           :key="item.id"
           class="text item">
           
        <!-- 文章内容 -->
         <span :style="{ color: colors[index] }">{{index+1}}</span>
        <span>{{item.title}}</span>
      </div>
    </el-card>
    <el-card class="box-card author">
      <div slot="header"
           class="clearfix">
        <span>作者榜</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text">换一换</el-button>
      </div>
      <div v-for="o in 4"
           :key="o"
           class="text item">
        {{'列表内容 ' + o }}
      </div>
    </el-card>

    <el-card class="box-card topic">
      <div slot="header"
           class="clearfix">
        <span>推荐话题</span>
        <el-button style="float: right; padding: 3px 0"
                   type="text">换一换</el-button>
      </div>
      <div v-for="o in 4"
           :key="o"
           class="text item">
        {{'列表内容 ' + o }}
      </div>
    </el-card>
  </div>
</template>

<script>
import ArticleApi from "../api/article";
export default {
  data() {
    return {
      list: [],
      searchObj: {pageNum:1},
      colors:[]
    };
  },
  methods: {
    init() {
      ArticleApi.list(this.searchObj)
        .then((result) => {
          if(result.data.list.length>0){
            this.list = result.data.list;
          }else{
             this.$message('到底咯');
          }
        })
        .catch((err) => {});
    },
    change(){
      this.searchObj.pageNum+=1;
      this.init();
    },
    // 随机颜色
    generateRandomColors() {
      const spanCount = 10; // 设置Span标签的数量
      const randomColor = () => {
        return "#" + Math.floor(Math.random() * 16777215).toString(16); // 生成随机颜色
      };

      for (let i = 0; i <spanCount; i++) {
        this.colors.push(randomColor()); // 将随机颜色添加到colors数组中
      }
    },
  },
  created() {
    this.init();
  },
  mounted() {
    this.generateRandomColors();
  },

};
</script>

<style scoped>
.right {
  z-index: 1;
}
.article {
  position: absolute;
  left: 1050px;
  top: 80px;
}
.author {
  position: absolute;
  left: 1050px;
  top: 420px;
}
.topic {
  position: absolute;
  left: 1050px;
  top: 680px;
}

.text {
  font-size: 13px;
  font-weight: bold;
}

.text span {
  padding-right: 10px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
}
</style>